<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1986880_ln3datp5ibt.css">
    <link rel="stylesheet" href="../../css/normalize.css">
    <link rel="stylesheet" href="../../css/common.css">
    <title>登录</title>
    <style>
        .main{
            position: absolute;
            left: 0;
            height: 100%;
            padding-top: 90px;
            padding-bottom: 290px;
        }
        .login-header{
            width: 100%;
            height: 90px;
            background-color: #fff;
            position: fixed;
            left:0;
            top: 0;
        }
        .login-header .left{
            overflow: hidden;
            padding-top: 23px;
        }
        .login-header img.logo{
            width: 140px;
            height: 45px;
            border-radius: 5px;
            overflow: hidden;
        }
        .login-header .info{
            width: auto;
            height: 40px;
            padding: 0 20px;
            border-left: 1px solid #DCDCDC;
            line-height: 40px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
            margin-left: 20px;
        }
        .login-header .right{
            height: 90px;
            line-height: 90px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
        }
        .login-header .right span{
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #4C9AFE;
            margin-left: 20px;
        }
        .footer{
            height: 290px;
            background-color: #fff;
        }
        .footer .footer-beian{
            text-align: center;
        }
        .footer .menus{
            width: 100%;
            border-bottom: 0;
            margin-top: 30px;
            text-align: center;
        }
        .footer .menus .item{
            display: inline;
            color: #333;
        }
        .pagebg{
            width: 100%;
            height: 100%;
            background-image: url('../../images/lawyer.png');
            background-size: 100% 100%;
        }
        .page-wrappper{
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            position: relative;
        }
        .page-wrappper .txt{
            height: 120px;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .page-wrappper .txt .txt-a{
            font-size: 48px;
            font-family: HYLingXinJ;
            font-weight: bold;
            color: #4C9AFE;
            margin-bottom: 10px;
        }
        .page-wrappper .txt .txt-b{
            font-size: 30px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            margin-top: 10px;
        }
        .page-wrappper .login-box{
            width: 360px;
            height: 360px;
            border-radius: 5px;
            overflow: hidden;
            background-color: #fff;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .page-wrappper .login-box .login-title{
            width: 100%;
            height: 60px;
            padding: 22px 30px;
            border-bottom: 1px solid #666;
        }
        .page-wrappper .login-box .login-title .item{
            height: 16px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
        }
        .page-wrappper .login-box .login-title .item.active{
            font-weight: bold;
            color: #4C9AFE;
        }
        .page-wrappper .login-box .login-title .item:first-child{
            padding-right: 30px;
        }
        .page-wrappper .login-box .login-title .item:nth-child(2){
            padding-left: 30px;
            border-left: 1px solid #E2E2E2;
        }
        .login-content{
            width: 100%;
            height: auto;
            padding-top: 30px;
        }
        .login-content .ipt{
            display: block;
            width: 300px;
            height: 50px;
            line-height: 50px;
            background: #FFFFFF;
            border: 1px solid #DEDEDE;
            border-radius: 5px;
            padding: 0 23px;
            margin: 15px auto 0;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333;
        }
        .login-content .ipt::placeholder{
            color: #999999;
        }
        .login-content .tips-content{
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 20px 30px;
        }
        .login-content .tips-content .resign{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #4C9AFE;
        }
        .login-content .tips-content .forgetpwd{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
        }
        .login-content .btn{
            width: 300px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: #4C9AFE;
            margin: 0 auto;
            border-radius: 5px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            cursor: pointer;
        }
        /* 短信登录 */
        .sms-login{
            width: 100%;
            height: auto;
            padding-top: 30px;
        }
        .sms-login .ipt{
            display: block;
            width: 300px;
            height: 50px;
            line-height: 50px;
            background: #FFFFFF;
            border: 1px solid #DEDEDE;
            border-radius: 5px;
            padding: 0 23px;
            margin: 15px auto 0;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333;
        }
        .sms-login .ipt::placeholder{
            color: #999999;
        }
        .sms-login .tips-content{
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 20px 30px;
        }
        .sms-login .tips-content .resign{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #4C9AFE;
        }
        .sms-login .tips-content .forgetpwd{
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
        }
        .sms-login .btn{
            width: 300px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: #4C9AFE;
            margin: 0 auto;
            border-radius: 5px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            cursor: pointer;
        }
        .sms-login .smscode{
            width: 300px;
            height: 50px;
            background: #FFFFFF;
            border: 1px solid #DEDEDE;
            border-radius: 5px;
            margin: 15px auto 0;
            padding: 0 23px;
        }
        .sms-login .smscode input{
            line-height: 50px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333;
        }
        .sms-login .smscode input::placeholder{
            color: #999999;
        }
        .sms-login .get-code{
            line-height: 50px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #4C9AFE;
            cursor: pointer;
        }
        .sms-login .xieyi{
            width: 100%;
            text-align: center;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
            margin-top: 8px;
        }
        .sms-login .xieyi a{
            color: #4C9AFE;
        }
    </style>
</head>

<body>
    <div id="root">
        <div class="login-header">
            <div class="wrapper">
                <div class="left fl">
                    <img src="../../images/lawyer.png" class="logo fl">
                    <div class="info fl">您身边专业的律师</div>
                </div>
                <div class="right fr">全国服务热线<span>400-820-8820</span></div>
            </div>
        </div>
        <div class="main">
            <div class="pagebg">
                <div class="page-wrappper">
                    <div class="txt">
                        <div class="txt-a">专业</div>
                        <div class="txt-b">放心的法律服务</div>
                    </div>
                    <div class="login-box fr">
                        <div class="login-title">
                            <div class="item fl active">账号登录</div>
                            <div class="item fl">短信登录</div>
                        </div>
                        <!-- <div class="login-content">
                            <input type="text" class="ipt" placeholder="手机号/邮箱/用户名">
                            <input type="password" class="ipt" placeholder="密码">
                            <div class="tips-content">
                                <a href="" class="resign fl">免费注册></a>
                                <a href="" class="forgetpwd fr">忘记密码？</a>
                            </div>
                            <div class="btn">登录</div>
                        </div> -->
                        <div class="sms-login">
                            <input type="text" class="ipt" placeholder="手机号/邮箱/用户名">
                            <div class="smscode">
                                <input type="text" class="fl" placeholder="密码">
                                <div class="get-code fr">获取验证码</div>
                            </div>
                            <div class="tips-content">
                                <a href="" class="resign fl">免费注册></a>
                                <a href="" class="forgetpwd fr">忘记密码？</a>
                            </div>
                            <div class="btn">登录</div>
                            <div class="xieyi">点击“登录”即表示您同意<a href=""> 注册协议 </a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="menus">
                <a class="item fl" href="">关于我们</a>
                <a class="item fl" href="">通知公告</a>
                <a class="item fl" href="">意见反馈</a>
                <div class="item fl">客服邮箱：KeFu12455@qq.com</div>
            </div>
            <div class="footer-beian">
                <div class="wrapper">
                    律师网版权所有 20205-2020 粤ICP备10231287号-5 粤公安网安备 44010602222号 增值电信业务经营许可证(ICP)粤B2-20100586
                </div>
            </div>
        </div>
    </div>
</body>

</html>